<!--
 * @Author: HeAo
 * @Date: 2021-10-25 20:48:37
 * @LastEditTime: 2021-10-26 17:01:38
 * @LastEditors: HeAo
 * @Description: 
 * @FilePath: \ej-customer\src\views\Product\product.vue
 * 别乱动！
-->
<template>
  <div class="product">
    <!-- 顶部导航栏 -->
    <van-sticky :offset-top="0">
      <van-nav-bar
        title="服务产品"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <!-- 根据栏目查询对应的产品信息 -->
    <div class="productContent">
      <div class="categoryList">
        <van-sidebar v-model="activeKey" style="width: 110px">
          <van-sidebar-item
            v-for="(item, index) in categories"
            :key="index"
            :title="item.name"
            style="width: 120px"
            @click="categoryClickHandler(item.id)"
          />
        </van-sidebar>
      </div>
      <div class="productCard">
        <van-card
          v-for="(item, index) in products"
          :key="index"
          :price="item.price"
          :desc="item.description"
          :title="item.name"
          :thumb="item.photo"
        >
          <template #footer>
            <van-stepper
              default-value="0"
              min="0"
              theme="round"
              button-size="22"
              disable-input
              @change="stepperChange(item, $event)"
            />
          </template>
        </van-card>
      </div>
      <!-- 产品服务页面-购物车统计块 -->
      <van-submit-bar
        style="bottom: 50px"
        :price="total * 100"
        button-text="提交订单"
        @submit="onSubmit"
      />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      // 侧边导航默认点击
      activeKey: "0",
      // 首页跳转后传递的栏目id
      categoryId: "",
      // 步进器最小值
      value: 0,
    };
  },
  created() {
    this.findAllCategories(); // 查询所有栏目信息
    // 将首页点击的栏目索引传递过来，替换activeKey。达到首页点击栏目和产品页默认点击栏目一致
    this.activeKey = this.$route.query.index;
    // 将首页点击的栏目的id传过来，作为检索产品的条件实参
    this.queryProductions(this.$route.query.id); // 根据栏目查询产品信息
  },
  methods: {
    ...mapActions("category", ["findAllCategories"]),
    ...mapActions("product", ["queryProductions"]),
    ...mapMutations("shopcart", ["addShopCar"]),
    // 返回上一页
    onClickLeft() {
      this.$store.getters.total = 0;
      this.$router.go(-1);
    },
    // 左侧栏目列表点击事件
    categoryClickHandler(id) {
      this.queryProductions(id);
    },
    // 提交按钮点击事件
    onSubmit() {
      // 选择完商品后，点击提交按钮，跳转到订单确认页面
      this.$router.push("orderConfirm");
    },
    // 步进器改变函数
    stepperChange(item, e) {
      // 自定义订单项（数据重组）
      let orderLine = {
        number: e,
        price: item.price,
        productId: item.id,
        productName: item.name,
      };
      // 添加购物车
      this.addShopCar(orderLine);
    },
  },
  computed: {
    ...mapState("category", ["categories"]),
    ...mapState("product", ["products"]),
    ...mapGetters("shopcart", ["total"]),
  },
};
</script>

<style scoped>
/* 产品整体样式 */
.productContent {
  display: flex;
  height: calc(100vh - 100px);
}
.categoryList {
  width: 120px;
}
.productCard {
  flex: 1;
  padding-right: 1em;
}
</style>